
<template>
<div>
  <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-left: 20px;margin-top: 20px">
    <el-form-item label="停车场状态">
        <el-select v-model="form.status" placeholder="请选择车位状态">
          <el-option label="闲置" :value="1"></el-option>
          <el-option label="占用" :value="2"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button type="success" @click="onAdd" v-if="userType==0 ||userType==2">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table
    v-loading="listLoading"
    :data="spaceList"
    element-loading-text="Loading"
    border
    fit
    highlight-current-row
  >
    <el-table-column align="center" width="100" label="序号" >
      <template slot-scope="scope">
        {{ scope.$index+1 }}
      </template>
    </el-table-column>
    <el-table-column label="停车位名称">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="车位状态" width="120"  align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.status==1?'闲置':scope.row.status==2?'占用':'其他' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="隶属车库"  align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.parkingLotName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="负责人" width="110" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.userName}}</span>
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作" v-if="userType==0 ||userType==2">
      <template v-slot="scope">
        <el-button type="primary" size="mini" @click="toEdit(scope.row)"  >编辑</el-button>
        <el-button type="danger"  size="mini" @click="toDel(scope.row.id)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageCount"
    @current-change="nextPage"
    >
  </el-pagination>

  <el-dialog
    title="操作"
    :visible.sync="carFormDialog"
    width="40%">
    <el-form :model="carForm" :rules="rules" ref="carForm" label-width="100px" class="demo-carForm">
      <el-form-item label="车位名称" prop="name">
        <el-input v-model="carForm.name"></el-input>
      </el-form-item>
      <el-form-item label="停车场状态" prop="status">
        <el-select v-model="carForm.status" placeholder="请选择车位状态">
          <el-option label="闲置" :value="1"></el-option>
          <el-option label="占用" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="status">
        <el-select v-model="carForm.userId" placeholder="请选择车位状态">
          <el-option v-for="user in usersList" :label="user.username" :value="user.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('carForm')">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</div>
</template>


<script>
import {addOrEdit, del, getPage, getUsers} from "@/api/car";

export default {
  name: "index",
  data(){
    return{
      pId:'',
      userType:'',
      form:{
        pageNow:1,
        status:'',
      },
      total:0,
      pageCount:4,
      spaceList:[],
      listLoading:true,
      carFormDialog:false,
      carForm:{
        id:'',
        parkingLotId:'',
        name:'',
        status:'',
        userId:''
      },
      usersList:[],
      rules: {
        name: [
          { required: true, message: '请输入车位名称', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择车位状态', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.pId=this.$route.query.pId
    this.userType=sessionStorage.getItem("type")
    this.getUserList();
    this.onSearch();

  },
  methods:{
    getUserList(){
      getUsers().then(res=>{
        if(res.code===20000){
          this.usersList=res.data
        }
      })
    },
    toDel(id){
      this.$confirm('此操作将永久删除该车位信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res=>{
          if(res.code===20000){
            this.$message.success("删除成功")
            this.onSearch()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    toEdit(row){
      this.$set(this.carForm,'id',row.id)
      this.$set(this.carForm,'parkingLotId',row.parkingLotId)
      this.$set(this.carForm,'name',row.name)
      this.$set(this.carForm,'status',row.status)
      this.$set(this.carForm,'userId',row.userId)
      this.carFormDialog=true;
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addOrEdit(this.carForm).then(res=>{
            if(res.code==20000){
              this.$message.success("操作成功")
              this.resetForm('carForm')
              this.carFormDialog=false;
              this.onSearch();
            }
          })
        }
      })
    },
    resetForm() {
      this.carForm={
        id:'',
          parkingLotId:'',
          name:'',
          status:'',
          userId:''
      }
    },
    onAdd(){
      this.resetForm()
      this.carFormDialog=true;
      this.carForm.parkingLotId=this.pId
    },
    nextPage(val){
      this.form.pageNow=val
      this.onSearch()
    },
    onSearch(){
      getPage(this.form,this.pageCount,this.pId).then(res=>{
        if(res.code==20000){
          this.spaceList=res.data.records
          this.total=res.data.total;
          this.listLoading = false
        }
      })
    }
  }
}
</script>


<style scoped>

</style>
